<!--
 * @Author: your name
 * @Date: 2021-04-16 18:32:28
 * @LastEditTime: 2021-04-16 21:16:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xmall_vue\src\pages\Personal\index.vue
-->
<template>
  <!-- 版心区 -->
  <div class="container">
    <!-- 内容区 -->
    <div class="container-personal">
      <!-- 左边信息选择区 -->
      <div class="containe-left">
        <!-- 头像 -->
        <div class="image">
          <img src="">
          <span>我是你爸爸</span>
        </div>
        <!-- 展示区 -->
        <div class="personalContainer">
          <ul>
            <li class="active">我的订单</li>
            <li>账户资料</li>
            <li>收货地址</li>
            <li>我的优惠</li>
            <li>售后服务</li>
            <li>以旧换新</li>
          </ul>
        </div>
      </div>
      <!-- 右边内容展示区 -->
      <div class="container-right">
        <div class="title">
          <h2>我的订单</h2>
        </div>
        <!-- 订单 -->
        <div class="container-order">
          <div>
            <span>2021-04-16 17:55</span>
            <span class="order-id">订单号:
              <a href="javascript:;">161856693290858</a>
            </span>
          </div>
          <div class="right">
            <span>单价</span>
            <span>数量</span>
            <span>商品操作</span>
          </div>
          <div class="last">
            <span>实付金额</span>
            <span>
              <a href="javscript:;">查看详情 ></a>
            </span>
          </div>
        </div>
        <div class="shopCart">
          <div class="cart-1">
            <div class="cart-1-1">
              <div class="image-box">
                <a href="javascript:;">
                  <img src="https://ooo.0o0.ooo/2018/07/13/5b48ac7766d98.png">
                </a>
              </div>
              <div class="ellipsis">
                <a href="javascript:;">支付测试商品 IPhone X 全面屏 全面绽放</a>
              </div>
              <span>￥ 1 ：00</span>
              <span>1</span>
              <span><button>删除</button></span>
              <div class="prod-operation">
                <div>￥1</div>
                <div>交易成功</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页器 -->
        <el-pagination :current-page="10"
                       style="text-align:right"
                       :page-sizes="[10, 20, 50]"
                       :page-size="3"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="30">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Personal',

}
</script>

<style lang="less" >
.container {
  width: 100%;
  height: 650px;
  background-color: #ededed;
  overflow: hidden;
  .container-personal {
    width: 1220px;
    height: 645px;
    margin: 40px auto 60px;
    // overflow: hidden;
    display: flex;
    .containe-left {
      width: 210px;
      height: 540px;
      margin-top: 40px;
      background-color: #fff;
      border-radius: 10px;
      .image {
        img {
          width: 170px;
          height: 170px;
          border: 1px solid #000;
          margin: 20px;
        }
        span {
          font-size: 16px;
          font-weight: 800px;
          display: block;
          text-align: center;
        }
      }
      .personalContainer {
        width: 100%;
        height: 290px;
        ul {
          margin-top: 20px;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          li {
            width: 100%;
            height: 16%;
            line-height: 50px;
            text-align: center;
            border-top: 1px solid #ebebeb;
            color: blue;
            font-size: 18px;
            cursor: pointer;
            &.active {
              color: #fff;
              background: #98afee;
            }
          }
        }
      }
    }
    // 右边内容展示区
    .container-right {
      float: left;
      margin: 40px;
      flex: 1;
      .title {
        padding-left: 30px;
        height: 60px;
        padding: 0 10px 0 24px;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
        background: linear-gradient(#fbfbfb, #ececec);
        line-height: 60px;
        font-size: 18px;
        color: #333;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
        border-bottom: 1px solid #d4d4d4;
      }
      .container-order {
        height: 38px;
        padding: 0 24px;
        background: #eee;
        border-top: 1px solid #dbdbdb;
        border-bottom: 1px solid #dbdbdb;
        line-height: 38px;
        font-size: 12px;
        color: #666;
        display: -ms-flexbox;
        display: flex;
        .order-id {
          display: inline-block;
          height: 100%;
          margin-left: 30px;
        }
      }
      .right {
        height: 38px;
        padding: 0 24px;
        background: #eee;
        border-top: 1px solid #dbdbdb;
        border-bottom: 1px solid #dbdbdb;
        line-height: 38px;
        font-size: 12px;
        color: #666;
        display: -ms-flexbox;
        display: flex;
        span {
          height: 38px;
          padding: 0 24px;
          background: #eee;
          border-top: 1px solid #dbdbdb;
          border-bottom: 1px solid #dbdbdb;
          line-height: 38px;
          font-size: 12px;
          color: #666;
          display: flex;
        }
      }
      .last {
        width: 230px;
        text-align: center;
        display: -ms-flexbox;
        display: flex;
        border-left: 1px solid #ccc;
        span {
          flex: 1;
          a {
            font-style: normal;
            text-decoration: none;
            color: #5079d9;
            cursor: pointer;
            transition: all 0.15s ease-out;
          }
        }
      }
      .shopCart {
        height: 300px;
        .cart-1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 24px;
          .cart-1-1 {
            display: flex;
            align-items: center;
            flex: 1;
            padding: 15px 0;
            // justify-content: space-between;
            position: relative;
            .image-box {
              border: 1px solid #ebebeb;
              a {
                font-style: normal;
                text-decoration: none;
                color: #5079d9;
                cursor: pointer;
                transition: all 0.15s ease-out;
                img {
                  display: block;
                  width: 80px;
                  height: 80px;
                }
              }
            }
            .ellipsis {
              width: 220px;
              margin-left: 20px;
              // overflow: hidden;
              white-space: pre-wrap;
              a {
                font-style: normal;
                text-decoration: none;
                color: #5079d9;
                cursor: pointer;
                transition: all 0.15s ease-out;
              }
            }
            span {
              width: 70px;
              text-align: center;
              button {
                width: 80px;
                height: 30px;
                border: none;
                background-color: rgb(180, 43, 43);
                color: #fff;
                font-size: 14px;
              }
            }
            .prod-operation {
              margin-left: 20px;
              height: 110px;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 254px;
              div {
                width: 100%;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>
